<template>
  <div
    v-loading="loading"
    class="main-map"
  >
    <VaMapAdv
      ref="vaMapAdv"
      :arcgis-api-url="arcgisApiUrl"
      :scene-config="sceneConfig"
      :scene-name="sceneName"
      :inner-comp-enable="innerCompEnable"
      :custom-func-tool-list="customFuncToolList"
      @custom-func-tool-click="handleCustomFuncToolClick"
      @base-map-load="handleBaseMapLoad"
      @dynamic-layer-click="handleDynamicLayerClickEvent"
    >
      <!-- <VaMapWindow
        v-if="mapWindowVisible"
        label="信息卡"
        window-width="700px"
        window-height="470px"
        @close-window="handleCloseMapWindow"
      >
        <div
          class="map-win-content"
        >
          <ResInfo
            v-if="resultData!==''"
            :result-data="resultData"
            :plan-id="planId"
            :infodata="infodata"
            :useraccount="useraccount"
            :active-id="activeId"
            :active-name="activeName"
            @success-submit="close"
          />
        </div>
      </VaMapWindow> -->
    </VaMapAdv>
    <div class="search-item">
      <SearchItem
        :search-array="searchArray"
        @select-search="selectChange"
      />
    </div>
    <div class="dialog-style">
      <el-dialog
        :visible.sync="mapWindowVisible"
        width="1050px"
        :close-on-press-escape="false"
        @closed="closeResInfo"
      >
        <span
          slot="title"
          class="dialog-title"
        >
          <TcAwesomeIcon
            name="bars"
            class="title-icon"
          />
          {{ resTitle }}
        </span>
        <ResInfo
          v-if="resultData !== ''"
          ref="resinfo"
          :result-data="resultData"
          :plan-id="planId"
          :open-card="openCard"
          :infodata="infodata"
          :useraccount="useraccount"
          :active-id="activeId"
          :active-name="activeName"
          @success-submit="close"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ToyCore from 'toy-core';
import { queryResInfo } from '@/api/service/gisShow2020';
import ResInfo from '../res-info/ResInfo.vue';
import SearchItem from './components/SearchItem.vue';

const { getLocalConfig } = ToyCore.core.config;

export default {
  name: 'MainMap',
  components: {
    ResInfo,
    SearchItem,
  },
  props: {
    planId: {
      type: String,
      default: '',
    },
    localConfig: {
      type: Object,
      default: () => {},
    },
    searchArray: {
      type: Array,
      default() {
        return [];
      },
    },
    activeId: {
      type: String,
      default: '',
    },
    activeName: {
      type: String,
      default: '',
    },
    useraccount: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      sceneName: 'GIS_PLATFORM',
      // 窗口是否可见
      mapWindowVisible: false,
      // 地图左侧操作栏
      customFuncToolList: [
        {
          tooltip: '可拖动窗口',
          icon: 'windows',
          id: 'map-window',
          checked: true,
        },
      ],
      isCheck: '',
      openCard: false,
      infodata: '',
      resTitle: '',
      arcgisApiUrl: '', // arcgis js api的地址
      sceneConfig: {}, // 地图服务配置
      innerCompEnable: {
        contextMenu: false, // 地图右键功能
        resouceQuery: false, // 左上角查询组件
        toolboxBar: true, // 右上角工具栏
        layerControl: true, // 右上角工具栏上：图层控制
        netgridTree: false, // 左上角网格树
        dynamicLayer: true, // 动态资源图层
        azPath: false, // AZ端路径分析
        smallCard: false, // 资源信息卡
        heatMap: false, // 通过数据渲染的热力图
        heatMapLayer: false, // 通过地图服务渲染的热力图
        funcToolbox: false, // 左侧功能入口
      },
      resultData: '',
    };
  },
  created() {
    this.initMap();
  },
  methods: {
    handleCustomFuncToolClick(item) {
      console.log('------log------', 111);
      // id与customFuncToolList定义的相同
      if (item.id === 'map-window') {
        this.mapWindowVisible = item.checked;
      }
    },
    selectChange(obj) {
      this.$emit('select-item', obj);
      console.log(obj);
    },
    // getcheck(id, isCheck) {
    //   this.resId = id;
    //   this.isCheck = isCheck;
    // },
    close(id, isCheck) {
      // if (isCheck === undefined) {
      //   // this.$emit('change-image', id, Number(this.isCheck));
      // } else {
      this.$emit('change-image', id, isCheck);
      // }
      this.$emit('map-click', this.infodata);
      this.handleCloseMapWindow();
    },
    // 信息卡窗口关闭
    handleCloseMapWindow() {
      this.mapWindowVisible = false;
      this.customFuncToolList[0].checked = false;
    },
    // 初始化地址
    initMap() {
      const localConfig = getLocalConfig();
      this.sceneConfig = Object.freeze({
        basemaps: Object.freeze(localConfig.basemaps),
        operationallayers: Object.freeze(localConfig.operationallayers),
      });

      this.arcgisApiUrl = localConfig.arcgisApiUrl;
    },
    // 地图加载成功
    handleBaseMapLoad() {
      this.$bus.emit('map-load', { vaMapAdv: this.$refs.vaMapAdv });
    },
    // 点击地图资源，打开资源详情窗口
    async handleDynamicLayerClickEvent(event) {
      this.loading = true;
      // this.$message(event.name);
      this.infodata = event;
      console.log(event);
      this.searchArray.forEach((resLine) => {
        if (resLine.id === event.id) {
          this.resTitle = `${resLine.typecn}---${event.name}`;
        }
        if (resLine.point) {
          resLine.point.forEach((resPoint) => {
            if (resPoint.id === event.id) {
              this.resTitle = `${resPoint.typecn}---${event.name}`;
            }
          });
        }
      });
      this.resTitle = this.resTitle === '' ? event.name : this.resTitle;
      this.$emit('map-click', event);
      const type = event.typecode.split('_');
      if (type.length === 2) {
        console.log('------log111------', type);
        if (type[1] === 'sheji') {
          const resultObj = await queryResInfo(this.infodata.id, type[0], this.planId);
          if (String(resultObj.data.success) === 'true') {
            this.resultData = resultObj.data.data;
            this.openCard = !this.openCard;
            this.mapWindowVisible = true;
          } else {
            this.$message.error('查询信息卡失败');
          }
          this.loading = false;
        } else {
          console.log(type[1], 'type');
        }
      }
      this.loading = false;
    },
    closeResInfo() {
      this.$refs.resinfo.clearSelectInfo();
    },
  },
};
</script>

<style lang="scss" scoped>
.main-map {
  height: 100%;

  .map-win-content {
    margin-left: 35px;
    margin-top: 25px;
    margin-right: 35px;
  }
  .search-item {
    position: relative;
    top: calc(-100vh + 72px);
  }
  .dialog-style {
    width: 700px;
    height: 500px;
  }
  /deep/ .el-dialog__header {
    height: 38px;
    background: #ebf0f3;
    padding: 0;
  }
  .dialog-title {
    line-height: 38px;
    font-size: 14px;
    padding-left: 22px;
    font-weight: bold;
    .title-icon {
      padding-right: 10px;
    }
  }
  /deep/ .el-dialog__headerbtn {
    top: 8px;
  }
  /deep/ .el-dialog__body {
    padding: 14px 30px 24px;
  }
  /deep/ .el-dialog {
    margin-top: 10vh !important;
  }
}
</style>
